<style>
.roles ul li {list-style: none; float: left;width: 130px;}
.roles lable {height:20px;line-height: 20px;}
</style>

<script type="text/javascript">
$(document).ready(function(){
	
	var _toolbar = [
		{
			id:'btnAddUser',
			text:'添加用户',
			iconCls:'icon-add',
			handler:function(){
				addUser();
			}
		}
	];
	$('#datagrid').datagrid({  
		title:'用户管理',
	    url:'usersData',  
	    toolbar:_toolbar,
	    columns:[[  
	        {field:'id',title:'ID',width:50,align:'center'},  
	        {field:'username',title:'用户名',width:150},
	        {field:'role_names',title:'角色',width:250},
	        {field:'is_display',title:'显示',width:50,align:'center',
	        	formatter:function(value,row,index){
	        		var a = '<img src="/images/ico_status_1.gif"/>';
		        	if(value == 0)
		        	{
		        		a = '<img src="/images/ico_status_0.gif"/>';
		        	}
	        		return a;
	        	}
	        },         
	        {field:'action',title:'操作',width:150,align:'center',
	        	formatter:function(value,row,index){
	        		var a = "<a href='javascript:editUser()'><i class='fa fa-edit fa-2x' style='color:#888;'></i></a> ";
	        		var b = "<a href='javascript:delUser("+row.id+")'><i class='fa fa-remove fa-2x' style='color:#888;'></i></a> ";
	        		return a + " " + b;
	        	}
	        }
	    ]],
		pagination:true,
		rownumbers:true,
		pageSize:30,
		singleSelect:true,
		onDblClickRow:function(){
			editUser();
		}
	});  
    
	
});

function addUser(){
	$('#dialog').dialog('open').dialog('setTitle','新增用户');
	$("#dialog").dialog("move",{top:$(document).scrollTop()+100});  
	$('#fm').form('clear');
}

function editUser(){
	var row = $('#datagrid').datagrid('getSelected');
	if (row){
    	$('#dialog').dialog('open').dialog('setTitle','修改用户');
    	$("#dialog").dialog("move",{top:$(document).scrollTop()+100});  
    	$('#fm').form('clear');
		$('#fm').form('load',row);
		
		$("#password").val("");//修改的时候密码设置为空
		
		var roleIds = row.role_ids;
		if(roleIds!=null && roleIds!=""){
			$.each(roleIds.split(","),function(i,n){
				$("input[name=role_ids][value="+n+"]").each(function(){
					$(this).attr("checked",true);
				});
			});	
		}
	}else{
		$.messager.alert('警告', '请先选择编辑的选项');
	}
}

function delUser(id){
	$.messager.confirm('删除用户','你确定要删除这个用户吗?',function(r){
	    if (r){  
			$.getJSON('userDel',{'id':id},function(data){
				if(data.result=="success"){
					$('#datagrid').datagrid('reload');
				}else{
	        		$.messager.show({
	        			title: '出错啦!',
	        			msg: data.message
	        		});
				}
			});
	    }  
	});
}


/**
 * 创建/更新会员信息
 */
function post(){
	var submit_url = "userUpdate";
	//提交表单
	$('#fm').form('submit',{
		url: submit_url,
		onSubmit: function(){
			return $(this).form('validate');
		},
		success: function(result){
			var result = eval('('+result+')');
			if (result.result == "success"){
				$('#datagrid').datagrid('reload');
				$('#dialog').dialog('close');
			}else{
				jQuery.messager.show({
					title: '出错啦!',
					msg: result.message
				});
			}
		}
	});
}

</script>

<table id="datagrid"></table>

<!-- 新增/编辑 -->
<div id="dialog" class="easyui-dialog" style="width:600px;height:400px;padding:20px;" closed="true" buttons="#dlg-buttons">
	<form id="fm" method="post" novalidate action="#">
	    <input type="hidden" name="id"/>
		<div class="fitem">
			<label>用户名</label>
			<input id="username" name="username" class="easyui-validatebox txt_fm_mmp" required="true"> 
		</div>
		<div class="fitem">
			<label>密码</label>
			<input id="password" name="password" class="easyui-validatebox txt_fm_mmp"> 
		</div>
		<div class="fitem roles">
			<div id="p1" class="easyui-panel" title="选择角色" style="width:530px;padding:10px;height: 210px;" collapsible="false" minimizable="false" maximizable="false">
			<ul>
			#foreach($item in $!roles)
				<li>
					<input type="checkbox" name="role_ids" value="$!item.id"/> $!item.name
				</li>
			#end
			</ul>
			<div style="clear:both;"></div>
			</div>
		</div>
	</form>
</div>
<div id="dlg-buttons">
	<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok" onclick="post()">提交</a>
	<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dialog').dialog('close')">取消</a>
</div>



